<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">hello</button>
    <script>
      /*
        1. dispatchEvent本质上是批量调用节点对象的事件处理函数
        2. 参数是一个event对象，事件对象中必须要指明事件类型，事件类型对应节点对象中设定好的处理函数
    */
      //   btn = [
      //     {
      //       click: (e) => {},
      //     },
      //     {
      //       dblclick: (e) => {},
      //     },
      //     { click: (e) => {} },
      //     { click: (e) => {} },
      //   ];
      const btn = document.getElementById("btn");
      btn.addEventListener("click", (e) => {
        console.log(e);
      });
      btn.addEventListener("click", (e) => {
        console.log(e);
      });
      btn.addEventListener("dblclick", (e) => {
        console.log(e);
      });
      //   PointerEvent 继承了 Event
      //   MouseEvent 继承了 Event
      const clickE = new Event("click");
      const dblclickE = new Event("dblclick");
      // 手动触发addEventListener事件处理函数
      btn.dispatchEvent(clickE);
      btn.dispatchEvent(dblclickE);
    </script>
  </body>
</html>
